<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进阶篇-axios实现异步请求</title>
    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="groupName">
    <button @click="getBatchGroup">获取所有任务组</button>
    <br>
    <table>
        <tbody>
        <tr>

        </tr>
        <tr v-for="(item,index) in list">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.memo}}</td>
            <td>{{item.catalog}}</td>
            <td>{{item.timeout}}</td>
            <td>{{item.failable}}</td>
            <td>{{item.follower}}</td>
            <td>{{item.freezeTime}}</td>
            <td>{{item.params}}</td>
        </tr>
        </tbody>
    </table>
    <!--<batch-group v-for="(item,index) in list" :index="index" :detail="item"></batch-group>-->
</div>
<script>
    //创建组件
    Vue.component('batch-group',{
        props:['detail','index'],
        template:`<div>
            <h1><span>{{index}}</span>&nbsp;{{detail.name}}</h1>
            <span>{{detail.id}}</span>
            <span>{{detail.memo}}</span>
            </div>`,
        methods:{
            update(detail){
                axios.put('batch-admin/v1/group',{
                    id:detail.id,
                    memo: detail.memo+"2017"
                }).then(function (res) {
                    //请求成功
                    console.log(res)
                }).catch(function (err) {
                    //请求失败
                    console.log(err)
                })
            }
        }
    });

    //创建vue实例
    const app=new Vue({
        el:'#app',
        data:{
            list:'',
            groupName:''
        },
        methods:{
            getBatchGroup(){
                let appTemp=this;
                axios.get('http://client1.fesine.com:8085/batch-admin/v1/groups',{
                    params:{
                        name:appTemp.$data.groupName
                    }
                }).then(function (res) {
                    // console.log(res);
                    appTemp.$data.list=res.data.data.resultlist;
                }).catch(function (err) {
                    console.log(err)
                })
            }
        }
    });
</script>
</body>
</html>